<!--预约订单列表-->
<template>
  <div>
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'customAppoint', billState: this.billState, billStateS: this.billStateS, BespeakType: this.type}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '输入客户名称或单号'}}</div>
          </div>
        </router-link>
      </div>
      <div class="displayflex con-app-head">
        <div class="flex1">
          <label>
            <input type="checkbox" class="list-radio-check" id="selectall" @change="checkedAll">
            <span class="list-radio-circle pos-list"></span>
            <em class="txt">全选（{{selectID.length}}）</em>
          </label>
        </div>
        <div class="btn" @click="appoint">{{title}}</div>
      </div>
      <div class="app-tips" v-if="type == '1'">通知开票人员，订单信息录入ERP</div>
      <div class="app-tips" v-if="type == '2'">通知司机,提货配送</div>
      <div class="app-tips" v-if="type == '3'">通知仓管人员，开始备货</div>
      <div class="app-tips" v-if="type == '4'">通知司机，到提货地点提货</div>
      <div class="app-tips" v-if="type == '5'">提交给业务经理审核订单</div>
    </div>
    <div class="noDate_page" v-if="items.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-188" 
              class='scroller-wrap130' 
              @on-pullup-loading="loadMore1"
              v-if="items.length>0"
              :pullup-config="{
                              content: loadTxt,
                              downContent: '上拉加载',
                              height: 32,
                              loadingContent: '加载中...',
                              upContent: '上拉加载',
                            }"
              ref="Scroller">
    <div class="acpt-list"> 
      <div class="acpt-list-wrap mb30" v-for="item in items" >
        <div class="acpt-list-head cf">
          <label>
            <input type="checkbox" class="list-radio-check" :value="item" v-model="selectID">
            <span class="list-radio-circle pos-list"></span>
            <em class="txt">{{item.BillDate | timeshort}}</em>
          </label>
        </div>
        <div class="displayflex acpt-list-body" @click="gotoDet(item.Guid)">
          <i class="iconfont icon-cargo"></i>
          <div class="txt flex1">
            <p class="ft17">{{item.MedName}}</p>
            <p>{{item.BillNo}}</p>
            <p>{{item.Province | province}} {{item.City | city}} {{item.District | district}} {{item.Address}}</p>
            <p>品种数：{{item.CountSum}}个</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="over" class="loader-over">没有更多记录了</div>
    </scroller>

    <manage-footer></manage-footer>
  </div>
</template>

<script>
import manageFooter from "@/components/core/footer/manage.footer.vue";
export default {
  name: "appointList",
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt: "",
      pgNo: 0,
      Page: 0,
      pgSize: 4,
      items: [],
      totalRecords: 0,
      over: false,
      billState: "",
      billStateS: "",
      selectID: [],
      ischeck: false,
      title: "订单预约",
      type: "",
      loadTxt: "上拉加载",
      StateList: ["P05"]
    };
  },
  created() {
    this.sechTxt = sessionStorage.sechtxt;
    this.type = this.$route.query.type;
    if (this.type == "1") {
      this.title = "开票预约";
      document.title = "开票预约";
      this.billState = "P03";
      this.billStateS = "P03";
    }
    if (this.type == "2") {
      this.title = "指派司机";
      document.title = "指派司机";
      this.billState = "P05";
      this.billStateS = "P05";
    }
    if (this.type == "3") {
      this.title = "发货预约";
      document.title = "发货预约";
      this.billState = "P03";
      this.billStateS = "P08";
    }
    if (this.type == "4") {
      this.title = "提货预约";
      document.title = "提货预约";
      this.billState = "P05";
      this.billStateS = "P08";
    }
    if (this.type == "5") {
      this.title = "提交审核";
      document.title = "提交审核";
      this.billState = "P02";
      this.billStateS = "P02";
    }
    this.getDate(1);
  },
  methods: {
    appoint() {
      if (this.selectID.length == 0) {
        this.Toast({
          message: "请选择单据！"
        });
        return false;
      }
      sessionStorage.items = JSON.stringify(this.selectID);
      if (this.type == "4") {
        this.$router.push({
          path: "/order/choiceMan",
          query: { type: this.type,name:'Driver' }
        });
      } else {
        this.$router.push({
          path: "/order/choiceManRole",
          query: { type: this.type }
        });
      }
    },
    loadMore1() {
      this.pgNo++;
      this.Page = this.pgNo * this.pgSize;
      this.getDate();
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.items.length > 0 && this.$refs.Scroller) {
            this.$refs.Scroller.donePullup();
          }
          if (this.totalRecords == this.items.length) {
            this.$refs.Scroller.disablePullup();
            this.over = true;
          }
        });
      }, 2000);
    },
    goLink(val) {
      sessionStorage.removeItem("sechtxt");
      this.sechTxt = "";
      this.billState = val;
      this.getDate(1);
      this.over = false;
      this.$nextTick(() => {
        if (this.items.length > 0) {
          this.$refs.Scroller.reset({
            top: 0
          });
          this.$refs.Scroller.enablePullup();
        }
      });
    },
    getDate(type) {
      if (type == 1) {
        this.Page = 0;
        this.pgNo = 0;
        this.items = [];
      }
      var self = this;
      var info = JSON.parse(localStorage.userinfo);
      var BuyerGUID = info.StaffID;
      if (info.UserBizType != "Salesman") {
        BuyerGUID = "";
      }
      var query = {
        MedName: this.sechTxt || "",
        BillNo: this.sechTxt || "",
        BillState: this.billState,
        BillStateS: this.billStateS,
        BuyerGUID: BuyerGUID,
        CorpGuid: info.CorpGuid,
        BespeakType: this.type,
        Page: this.Page,
        Rows: this.pgSize
      };
      this.Ajax.post("SearchMedpoCode", query).then(function(resp) {
        if (resp.IsSuccess) {
          if (resp.Datas && resp.Datas.length > 0) {
            self.Page++;
            self.items = self.items.concat(resp.Datas);
          }
          self.totalRecords = resp.TotalRecords;
          if (self.totalRecords < self.pgSize) {
            self.loadTxt = "";
          }
        } else {
          self.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    gotoDet(value) {
      this.$router.push({
        path: "/order/appointBillDetail",
        query: { id: value }
      });
    },
    //全选
    checkedAll() {
      var self = this;
      self.selectID = [];
      var ischeck = document.getElementById("selectall");
      var chk_list = document.getElementsByTagName("input");
      for (var i = 0; i < chk_list.length; i++) {
        if (chk_list[i].type == "checkbox") {
          if (chk_list[i].id != "selectall") {
            chk_list[i].checked = ischeck.checked;
          }
        }
      }
      if (ischeck.checked) {
        self.totalRecords = self.items.length;
        self.items.forEach(function(element) {
          self.selectID.push(element);
        }, this);
      } else {
        self.selectID = [];
        self.totalRecords = 0;
      }
    }
  }
};
</script>